<template>
  <view class="flex-col card">
    <QuestionBody
      :question="question"
      :number="number"
      :tf_options="tf_options"
      :answer="answer"
      @update:answer="changeAnswer"
    ></QuestionBody>

    <view
      class="flex-row justify-between items-center self-stretch group_3 mt-4"
    >
      <view class="flex-row items-center">
        <Zoomer :mask-click="true">
          <template #content="zoomerProps">
            <scroll-view class="scroll-zoomer" scroll-y scroll-x>
              <view class="mt-16 card card-zoomer">
                <QuestionBody
                  :question="question"
                  :number="number"
                  :tf_options="tf_options"
                  :fontSize="50"
                  :answer="answer"
                  @update:answer="changeAnswer"
                ></QuestionBody>
              </view>
              <button
                class="mt-16 zoom-close-button"
                hover-class="zoomer-close-button-hover"
                @click="zoomerProps.close"
              >
                关闭
              </button>
            </scroll-view>
          </template>
        </Zoomer>
        <QuestionReader class="ml-6" :content="audioContent" />
      </view>
      <image
        class="flex-row items-center image_9"
        :class="{ hidden: answer === '' }"
        src="/static/icon/tick_pink.svg"
      />
    </view>
  </view>
</template>

<script>
import QuestionReader from "../../../components/Questionnare/QuestionReader/QuestionReader.vue";
import Zoomer from "../../../components/Questionnare/Zoomer/Zoomer.vue";
import QuestionBody from "../../../components/Questionnare/QuestionBody/QuestionBody.vue";
import { getKeyword } from "../../../util/questionnaire/index.js";
export default {
  name: "QuestionCard",
  components: {
    QuestionReader,
    Zoomer,
    QuestionBody,
  },
  props: {
    question: {
      type: Object,
      validator(value) {
        return (
          value.hasOwnProperty("id") &&
          value.hasOwnProperty("content") &&
          value.hasOwnProperty("type") &&
          ["choice", "tf", "blank", "plain"].includes(value.type)
        );
      },
    },
    tf_options: {
      type: Array,
      default: () => ["是", "否"],
    },
    answer: {
      type: String,
      default: "",
    },
    number: {
      type: Number,
      default: -1,
    },
    fontSize: {
      type: Number,
      default: 30,
    },
  },
  data() {
    return {
      optionHeaders: ["A", "B", "C", "D", "E", "F", "G"],
      timer: {
        interval: null,
        currentTime: 0,
        running: false,
      },
    };
  },
  // created() {
  //   console.log("fontSize", this.fontSize);
  //   this.$refs.componentRoot.style.setProperty("--fontSize", this.fontSize.toString() + "rpx");
  // },
  emits: ["update:answer"],
  methods: {
    changeAnswer(newAnswer) {
      this.$emit("update:answer", newAnswer);
    },
    onInputAnswer(event) {
      this.$emit("update:answer", event.target.value);
    },
  },
  computed: {
    tf_text() {
      return this.question.tf_options ?? this.tf_options;
    },
    options() {
      // 解析选项
      const options = this.question.options;
      for (const index in options) {
        const option = options[index];
        if (option && option[0] === "$") {
          options[index] = getKeyword(option.slice(1));
        }
      }
      return options;
    },
    // zoomContent() {
    //   // 放大显示的内容，包括问题和选项
    //   let content = this.question.content;
    //   if (this.question.type === "choice") {
    //     for (const index in this.options) {
    //       content += `\n${this.optionHeaders[index]}：${this.options[index]}`;
    //     }
    //   } else if (this.question.type === "tf") {
    //     content += `\n选项1：${this.tf_text[0]}\n选项2：${this.tf_text[1]}`;
    //   }
    //   return content;
    // },
    audioContent() {
      let content = this.question.content;
      if (this.question.type === "choice") {
        content += "。请听选项。";
        for (const index in this.options) {
          content += `${this.optionHeaders[index]}：${this.options[index]}。`;
        }
      } else if (this.question.type === "tf") {
        content += `。请听选项。选项1：${this.tf_text[0]}。选项2：${this.tf_text[1]}。`;
      }
      return content;
    },
  },
};
</script>

<style scoped lang="css">
.ml-9 {
  margin-left: 18rpx;
}

.card {
  padding: 24rpx 16rpx;
  background-color: #ffffff;
  box-shadow: 2rpx 2rpx 8rpx #00000040;
  border-radius: 24rpx;
}

.card-zoomer {
  width: 680rpx;
  margin: auto;
  margin-top: 16rpx;
}

.card:first-child {
  margin-top: 0;
}

.group_3 {
  padding: 16rpx 0 0;
  border-top: solid 2rpx #f5f5f5;
}

.image_9 {
  width: 40rpx;
  height: 40rpx;
}

.hidden {
  visibility: hidden;
}

.zoom-close-button {
  width: 680rpx;
  border-radius: 24rpx;
  font-size: 50rpx;
  color: #ffffff;
  background-color: #f4ae82;
}

.zoomer-close-button-hover {
  background-color: #ef8b50;
}

.scroll-zoomer {
  height: 100vh;
  background-color: #f5f5f5;
  width: 100%;
}
</style>